<template>  
    <view class="container">  
        <carHeader :title="'消费记录'"></carHeader>  
        <view class="content">  
            <ul style="padding: 0;">  
                <li v-for="(item, index) in items" :key="index" :class="{'no-border': index === items.length - 1}">  
                    <view>  
                        <view style="margin-bottom: 15rpx; font-weight: 600">大美汽车维修店-洗车</view>  
                        <view>2023.3.11 11.09</view>  
                    </view>  
                    <view>-50元</view>  
                </li>  
            </ul>  
        </view>  
    </view>  
</template>  
  
<script>  
export default {  
    data() {  
        return {  
            items: [{}, {}, {}, {}] 
        };  
    }  
}  
</script>  
  
<style lang="scss">  
.carHeader{
		background-size: cover;
	}
li {  
    list-style: none;  
    margin-top: 10rpx;  
    height: 150rpx;  
    border-bottom: 2rpx solid darkgray;  
    display: flex;  
    align-items: center;  
    justify-content: space-between;  
    padding: 0 50rpx; 
}  
.no-border {  
    border-bottom: none;  
} 
.content {  
    position: relative;  
    top: -220rpx; 
	padding: 25rpx;
    margin: 5%;  
    border-radius: 30rpx;  
    background-color: #ffffff; 
}  
</style>